<link rel="stylesheet" th:href="@{admin/plugins/treegrid/jquery.treegrid.css}">

<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">学生报名授课信息</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a th:href="@{admin}">首页</a></li>
                    <li class="breadcrumb-item active">教学管理</li>
                    <li class="breadcrumb-item active">学生报名授课信息</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- Main content -->
<section class="content">
    <div class="card card-info">
        <form id="searchForm" class="needs-validation form-inline" novalidate="">
            <div class="form-group">
                <label for="keywords">关键字:</label>
                <input type="text" class="form-control m-2" id="keywords" required="">
            </div>
            <div class="form-group">
                <label for="studentName">学生:</label>
                <input type="text" class="form-control m-2" id="studentName" required="">
            </div>
            <div class="form-group">
                <label for="teacherName">老师:</label>
                <input type="text" class="form-control m-2" id="teacherName" required="">
            </div>
            <!--<div class="form-group">
                <label for="courseName">课程:</label>
                <input type="text" class="form-control m-2" id="courseName" required="">
            </div>-->
            <div class="form-group">
                <label for="courseId">课程:</label>
                <select id="courseId" class="form-control m-2" th:with="type=${@dict.getCourseList()}" required="">
                    <option selected disabled>选择课程</option>
                    <option th:each="dict : ${type}" th:text="${dict.key}" th:value="${dict.value}"
                            ></option>
                </select>
            </div>
            <!--<div class="form-group">
                <label for="status">状态:</label>
                <select id="status" class="form-control m-2" required="">
                    <option selected disabled>选择状态</option>
                    <option value="1">已发布</option>
                    <option value="0">草稿</option>
                </select>
            </div>-->
            <div class="form-group">
                <button class="btn btn-primary ml-3" type="submit">查询</button>
                <button class="btn btn-default ml-2" type="reset">重置</button>
            </div>
        </form>
    </div>
    <div class="card card-body">
        <div id="toolbar">
            <shiro:hasPermission name="teaching:add">
                <button id="btn_add" type="button" class="btn btn-primary" onclick="addTeaching()">
                    <span class="fas fa-plus" aria-hidden="true"></span>新增
                </button>
            </shiro:hasPermission>
            <shiro:hasPermission name="teaching:batchDelete">
                <button id="btn_batch_delete" type="button" class="btn btn-danger">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>批量删除
                </button>
            </shiro:hasPermission>
        </div>
        <table class="table-sm mt-3" id="table"></table>
        <div id="teachingLayer" style="display: none;padding: 20px;">
            <table id="p-table"></table>
        </div>
    </div>

</section>

<!-- 表单模态框 -->
<div class="modal fade" id="formModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="formTitle"></h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="formContent"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveOrUpdateBtn">保存
                </button>
            </div>
        </div>
    </div>
</div>
<!--layui 时间-->
<script th:src="@{admin/plugins/laydate/laydate.js}"></script>
<script th:src="@{admin/plugins/layui/layui.js}"></script>
<script th:src="@{admin/plugins/treegrid/jquery.treegrid.min.js}"></script>
<script th:src="@{admin/plugins/treegrid/jquery.treegrid.extension.js}"></script>
<script th:src="@{admin/plugins/treegrid/tree.table.js}"></script>
<script>
    var editFlag = "[[${@perms.hasPerm('teaching:edit')}]]";
    var deleteFlag = "[[${@perms.hasPerm('teaching:delete')}]]";

    var columns = [
        {checkbox: true},

        {
            field: 'id',
            title: 'id',
            visible: false
        },
        {
            field: 'studentName',
            title: '学生名字',
            align: "left"
        },
        {
            field: 'idCard',
            title: '身份证号',
            align: "center"
        },
        {
            field: 'phone',
            title: '手机号码',
            align: "center"
        },
        {
            field: 'nickName',
            title: '昵称',
            align: "center"
        },

        {
            field: 'childName',
            title: '少儿姓名',
            align: "center"
        },
        {
            field: 'childIdcard',
            title: '少儿身份证号',
            align: "center"
        },
        {
            field: 'childSex',
            title: '少儿性别',
            align: "center",
            formatter: function (value) {
                return value ==1 ? '男' : '女'
            }
        },
        {
            field: 'childAge',
            title: '少儿年纪',
            align: "center"
        },
        {
            field: 'childWeight',
            title: '体重',
            align: "center"
        },
        {
            field: 'childHeight',
            title: '身高',
            align: "center"
        },

        {
            field: 'ttype',
            title: '参训形式',
            align: "center",
            formatter: function (value) {
                return value ==1 ? '复训' : '新人'
            }
        },
        {
            field: 'courses.courseName',
            title: '课程名称',
            align: "center"
        }, {
            field: 'coursePlans.address',
            title: '上课地址',
            align: "center"
        }, {
            field: 'coursePlans.startEndTime',
            title: '上课时间',
            align: "center",
        },

        {
            field: 'courses.isChild',
            title: '是否少儿课程',
            align: "center",
            formatter: function (value) {
                return value ==1 ? '少儿课程' : '非少儿课程'
            }
        },
        {
            field: 'teachers.teacherName',
            title: '推荐老师',
            align: "center",
        },
        {
            field: 'createTime',
            title: '创建时间',
            align: "center"
        },

        {
            field: 'operation',
            title: '操作',
            align: "center",
            width: 150,
            formatter: function (value, row, index) {
                var edit = editFlag ? '<button class="btn btn-info btn-sm" onclick="editTeaching(' + row.id + ')">编辑</button>' : '';
                var del = deleteFlag ? '<button class="btn btn-danger btn-sm ml-1" onclick="deleteTeaching(' + row.id + ')">删除</button>' : '';
                return edit + del;
            }
        }];

    var options = {
        id: "#table",
        url: '/teaching/list',
        columns: columns,
        toolbar: '#toolbar',
        showRefresh: true,
        queryParams: queryParams
    }
    Core.initTable(options);

    function refreshTable() {
        Core.refreshTable("#table")
    }

    /*查询参数*/
    function queryParams(params) {
        return {
            pageNumber: params.pageNumber,
            pageSize: params.pageSize,
            courseId: $("#courseId").val(),
            //courseName: $("#courseName").val(),
            studentName: $("#studentName").val(),
            keywords: $("#keywords").val(),
            teacherName: $("#teacherName").val(),
        };
    }

    // 查询
    $('#searchForm').submit(function (event) {
        event.preventDefault();
        event.stopPropagation();
        refreshTable();
    })


    /*新增*/
    function addTeaching() {
        Core.load("#formContent", "/teaching/add", function () {
            $('#formTitle').text('新增')
            $("#formModal").modal('show');
        }, 2);
    }

    /*编辑*/
    function editTeaching(id) {
        Core.load("#formContent", "/teaching/edit?id=" + id, function () {
            $('#formTitle').text('编辑')
            $("#formModal").modal('show');
        }, 2);
    }

    /*删除*/
    function deleteTeaching(id) {
        Core.confirm("确定删除该学生报名授课信息吗？", function () {
            Core.postAjax("/teaching/delete", {"id": id}, function (data) {
                refreshTable();
                layer.msg(data.msg);
            })
        })
    }




    // 保存或更新
    $('#saveOrUpdateBtn').on('click', function () {
        var $f = $('#teachingForm');
        var valid = $f[0].checkValidity();
        var url = $f.find("input[name='id']").val() ? "/teaching/edit" : "/teaching/add"
        if (valid) {
            Core.mask("#saveOrUpdateBtn");
            Core.postAjax(url, $f.serialize(), function (data) {
                Core.unmask("#saveOrUpdateBtn");
                if (data.status === 200) {
                    $("#formModal").modal("hide");
                    refreshTable();
                }
                layer.msg(data.msg);
            }, function () {
                Core.unmask("#saveOrUpdateBtn");
            })
        }
        $f.addClass("was-validated")
    })

    // 批量删除
    $("#btn_batch_delete").on('click', function () {
        var checkedRows = Core.selectMutiData("#table");
        if (checkedRows) {
            Core.confirm("确定删除选中的" + checkedRows.length + "条记录？", function () {
                var ids = [];
                $.each(checkedRows, function (i, item) {
                    ids.push(item.id);
                })
                Core.postAjax("/teaching/batch/delete", {"ids": ids}, function (data) {
                    if (data.status === 200) {
                        refreshTable();
                    }
                    layer.msg(data.msg);
                })
            })
        }
    })


</script>